<template>
  <div class="home">
    <div class="header">
      <nav>
        <h1 @click="this.$router.push('/find/recommend')">
            <img src="~@/assets/img/topbar.png" alt="网易云音乐">
        </h1>
        <ul>
          <li v-for="item in routerList" v-bind:key="item.name">
            <a target="_blank" :href="item.path" v-if="item.path.startsWith('http')">{{ item.text }}</a>
            <router-link v-else :to="item.path" active-class="on">{{ item.text }}</router-link>
          </li>
        </ul>
        <div class="iconInp">
          <input @focus="placeHolder = '' " @blur="placeHolder = '音乐/视频/电台/用户'" type="text" class="inp" :placeholder=placeHolder>
          <span class="iconfont">&#xe606;</span>
        </div>

        <button class="btn" @click="goToUrl">创作者中心</button>
        <button class="login">登录</button>
      </nav>
    </div>
    <div class="content">
      <router-view/>
    </div>
  </div>
</template>

<script>

export default {
  name: 'home-page',
  props: {},
  data: function () {
    return {
      message: 'home',
      placeHolder: '音乐/视频/电台/用户',
      creatorUrl: 'https://music.163.com/#/login?targetUrl=%2Fcreatorcenter',
      routerList: [
        {
          path: '/find',
          name: 'find',
          text: '发现音乐',
        },
        {
          path: '/my',
          name: 'my',
          text: '我的音乐',
        },
        //关注
        {
          path: '/friend',
          name: 'friend',
          text: '关注',
        },
        {
          path: 'https://music.163.com/store/product',
          name: 'shop',
          text: '商城',
        },
        {
          path: 'https://music.163.com/st/musician',
          name: 'musician',
          text: '音乐人',
        },
        {
          path: 'https://music.163.com/st/ad-song',
          name: 'RecommendSongs',
          text: '云推歌',
        },
        {
          path: '/download',
          name: 'download',
          text: '下载客户端',
        },
      ]
    }
  },


  methods: {
    goToUrl() {
      window.open(this.creatorUrl,'_blank');
    },

  }
}
</script>

<style scoped>
.home {

  .header {
    background-color: #242424;

    nav {
      user-select: none;
      display: flex;
      justify-content: space-between;
      width: 1100px;
      margin: 0 auto;
      align-items: center;

      .login {
        border: none;
        background-color: #242424;
        color: rgba(255, 255, 255, .5);
        cursor: pointer;
      }

      .login:hover {
        color: rgba(255, 255, 255, .3);
      }

      .iconInp {
        position: relative;

        .btn:hover {
          border: 1px solid rgba(255, 255, 255);
        }

        .iconfont {
          position: absolute;
          left: 7px;
          top: 50%;
          transform: translateY(-50%);
        }

        .inp {
          outline: none;
          border-radius: 20px/50%;
          font-size: 12px;
          padding: 10px;
          text-indent: 20px;
          border: none;
        }
      }

      .btn {
        border-radius: 20px/50%;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, .5);
        background-color: #242424;
        cursor: pointer;
        color: #ccc;
      }

      h1 {
        width: 160px;
        height: 69px;
        overflow: hidden;
        z-index: 2;
        cursor: pointer;
      }

      ul {
        display: flex;
        li {
          height: 70px;
          display: flex;

          a {
            color: #ccc;
            line-height: 70px;
            font-size: 14px;
            padding: 0 18px;
            cursor: pointer;
            position: relative;
            &:hover{
              background-color: #000;
            }

            &.on {
              background-color: #000;

              &:after {
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                border: 10px solid transparent;
                border-bottom-color: #c20c0c;
              }
            }
          }
        }

      }
    }
  }


}
</style>

